<template>
  <div class="sidebar-item">
    <el-menu-item 
      v-if="!item.children || item.children.length === 0" 
      :index="resolvePath(basePath, item.path)"
    >
      <el-icon v-if="item.meta?.icon">
        <component :is="item.meta.icon" />
      </el-icon>
      <template #title>
        <span>{{ item.meta?.title }}</span>
      </template>
    </el-menu-item>
    
    <el-sub-menu 
      v-else 
      :index="resolvePath(basePath, item.path)"
    >
      <template #title>
        <el-icon v-if="item.meta?.icon">
          <component :is="item.meta.icon" />
        </el-icon>
        <span>{{ item.meta?.title }}</span>
      </template>
      
      <sidebar-item 
        v-for="child in item.children" 
        :key="child.path"
        :item="child"
        :base-path="resolvePath(basePath, item.path)"
      />
    </el-sub-menu>
  </div>
</template>

<script setup lang="ts">
interface MenuItem {
  path: string
  meta?: {
    title?: string
    icon?: string
  }
  children?: MenuItem[]
}

const props = defineProps<{
  item: MenuItem
  basePath: string
}>()

const resolvePath = (basePath: string, relativePath: string): string => {
  // 简单的路径解析逻辑
  if (relativePath.startsWith('/')) {
    return relativePath
  }
  if (basePath.endsWith('/')) {
    return `${basePath}${relativePath}`
  }
  return `${basePath}/${relativePath}`
}
</script>

<style scoped>
.sidebar-item {
  width: 100%;
}
</style>